<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>左右tab切换</title>
    <link rel="stylesheet" href="css/reset.css"/>
    <link rel="stylesheet" href="css/style.css"/>
    <script src="js/jquery-2.1.4.min.js"></script>
    <script src="js/base.js"></script>
</head>
<body>
    <div class="box">
        <div class="box-l">
            <ul>
                <li class="li">tab1</li>
                <li>tab2</li>
                <li>tab3</li>
                <li>tab4</li>
                <li>tab5</li>
                <li>tab6</li>
                <li>tab7</li>
                <li>tab8</li>
                <li>tab9</li>
                <li>tab10</li>
                <li>tab11</li>
                <li>tab12</li>
                <li>tab13</li>
            </ul>
        </div>
        <div class="box-r">
            <div class="r-1" style="display: block">
                r-1
            </div>
            <div class="r-2">
                r-2
            </div>
            <div class="r-3">
                r-3
            </div>
            <div class="r-4">
                r-4
            </div>
            <div class="r-5">
                r-5
            </div>
            <div class="r-6">
                r-6
            </div>
            <div class="r-7">
                r-7
            </div>
            <div class="r-8">
                r-8
            </div>
            <div class="r-9">
                r-9
            </div>
            <div class="r-10">
                r-10
            </div>
            <div class="r-11">
                r-11
            </div>
            <div class="r-12">
                r-12
            </div>
            <div class="r-13">
                r-13
            </div>
        </div>
    </div>
    <script>
        $(document).ready(function(){
            $("li").click(function(){
                $(this).addClass("li").siblings().removeClass();
                $(".box-r>div").hide().eq($('ul>li').index(this)).show();
            })
        })
    </script>
</body>
</html>